<template>
  <div>
    <Row :gutter="16">
      <Col span="9">
        <Input v-model="queryInfo.query" placeholder="请输入需要搜索的内容" 
          prefix="ios-search" @on-clear="setValueNull" 
          @on-change="getData"
          @keydown.enter.native="getData" class="search_timetable"
          clearable/>
      </Col>
    </Row>
    <div>
      <div v-for="(item,index) in imgList" :key="item.id" class="main_content">
        <h1>{{item.class_name}}</h1>
        <el-image  class="time_table_img" :src="item.url" :preview-src-list="priviewList" alt=""></el-image>
      </div>
    </div>
  </div>
</template>

<script>
import { findAllJxTimeTable } from '~/api/data' 
export default {
  data(){
    return{
      imgList: [],
      queryInfo:{  
          pageNum: 1,
          pageSize: 10,
          query: ''
      },
      priviewList:[]
  }
},
  methods:{
    async getData() {
      return findAllJxTimeTable(this.queryInfo).then(data => {
        this.imgList = data.data;
        this.imgList.forEach(item => {
          this.priviewList.push(item.url)
        })
        console.log(this.priviewList);
      })
    },
    setValueNull(){
      this.getData();
    },
 },
  created() {
   this.getData();
  }
}
</script>

<style scoped>
.main_content{
  border:5px solid #96C2F1;
  margin: 40px;
}
.search_timetable{
  margin-left: 40%;
  margin-top: 50px;
}

.time_table_img{
  width: 65%;
  box-shadow:   rgba(243, 20, 20, 0.2) 0 2px 5px 0px;
  border-radius: 5px;
}
</style>